<template>
  <div class="app-container">
    <!-- 患者信息搜索开始 -->
    <el-card class="box-card">
      <el-form ref="queryForm" :model="patientParams" label-width="70px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="身份证号" porp="patientIdnum">
              <el-input
                v-model="patientParams.patientIdnum"
                placeholder="请输入患者身份证号"
                clearable
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载身份证号</el-button>
              <el-button type="warning" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载患者信息</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 患者信息搜索结束 -->

    <!-- 患者基本信息表单开始 -->
    <el-card class="box-card">
      <el-form ref="form" :model="patientParams" :rules="rules" :inline="true" label-width="88px">
        <el-form-item label="身份证号" prop="patientIdnum">
          <el-input
            v-model="patientParams.patientIdnum"
            placeholder="请输身份证号"
            clearable
            size="small"
            style="width:180px"
          />
        </el-form-item>
        <el-form-item label="患者姓名" prop="patientName">
          <el-input
            v-model="patientParams.patientName"
            placeholder="请输入患者姓名"
            clearable
            size="small"
            style="width:180px"
          />
        </el-form-item>
        <el-form-item label="患者电话" prop="patientPhone">
          <el-input
            v-model="patientParams.patientPhone"
            placeholder="请输入患者电话"
            clearable
            size="small"
            style="width:180px"
          />
        </el-form-item>
        <el-form-item label="性别" prop="patientSex">
          <el-radio-group v-model="patientParams.patientSex" size="medium">
            <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="patientBirth">
          <el-date-picker
            v-model="patientParams.patientBirth"
            size="small"
            style="width:200px"
            value-format="yyyy-MM-dd"
            type="date"
          />
        </el-form-item>
        <el-form-item label="患者年龄" prop="patientAge">
          <el-input
            v-model="patientParams.patientAge"
            :readonly="true"
            placeholder="请输入患者年龄"
            clearable
            size="small"
            style="width:200px"
          />
        </el-form-item>
        <el-form-item label="地址信息" prop="patientAddress">
          <el-input
            v-model="patientParams.patientAddress"
            placeholder="请输入地址信息"
            clearable
            style="width:500px"
            size="small"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 患者基本信息表单结束 -->

    <el-card class="box-card">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="guahaoleixing" :rules="rules" size="medium" label-width="100px">
          <el-col :span="11">
            <el-form-item label-width="-1px" label="" >
              <el-radio-group  v-model="guahaoleixing.registraName" size="medium" @change="handleRegistraNameQuery">
                <el-radio-button label="门诊" >门诊</el-radio-button>
                <el-radio-button label="门诊+病例本" >门诊+病例本</el-radio-button>
                <el-radio-button label="急诊" >急诊</el-radio-button>
                <el-radio-button label="急诊+病例本" >急诊+病例本</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="12px" label="" >
              <span>挂号费 {{guahaoleixing.registraUnitprice}} ￥</span>
              <el-button type="primary" size="medium" @click="submitForm"> 挂号收费 </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="所属科室" prop="postCode">
        <el-input
          v-model="queryParams.deptName"
          placeholder="请输入科室名称"
          clearable
          size="small"
          style="width:170px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="挂号类型" prop="postName">
        <el-select v-model="queryParams.systemTregistraFee.registraName" placeholder="挂号类型" clearable size="small" style="width:170px">
          <el-option
            v-for="dict in leixingOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="挂号时段" prop="registerTime">
        <el-select v-model="queryParams.registerTime" placeholder="挂号时段" clearable size="small" style="width:170px">
          <el-option
            v-for="dict in registerTimeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="挂号时间" prop="registerDate">
        <el-date-picker
          v-model="queryParams.registerDate"
          size="small"
          style="width:170px"
          value-format="yyyy-MM-dd"
          type="date"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="deptList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="科室ID" align="center" prop="deptId" />
      <el-table-column label="科室名称" align="center" prop="deptName" />
      <el-table-column label="当前号数" align="center" prop="deptNum" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<!--***************************************************************************************************************************-->
<script>
    import { listDept,listRegister,getPatientInfo,getRegistraFee,selectAllGuaHaoType } from '@/api/treat/registered';
    export default {
        data() {
            return {
                // 科室表格数据
                deptList: [],
                // 挂号时段数据字典
                registerTimeOptions: [{
                    "dictLabel": "上午",
                    "dictValue": "上午"
                }, {
                    "dictLabel": "下午",
                    "dictValue": "下午"
                }, {
                    "dictLabel": "晚上",
                    "dictValue": "晚上"
                }],
                // 科室查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 2,
                    deptName: undefined,
                    registerDate: undefined,
                    systemTregistraFee: {
                        registraName: undefined
                    },
                    registerTime: undefined
                },
                formData1: {
                    // 门诊、门诊+病例、急诊、急诊+病例  默认值显示是 门诊
                    name: 1,
                    guahaofei: 0,
                },
                rules: {
                    leixing: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'change'
                    }],
                },
                // 门诊类型
                leixingOptions: [{
                    "dictLabel": "门诊",
                    "dictValue": "门诊",
                }, {
                    "dictLabel": "门诊+病例本",
                    "dictValue": "门诊+病例本",
                }, {
                    "dictLabel": "急诊",
                    "dictValue": "急诊",
                }, {
                    "dictLabel": "急诊+病例本",
                    "dictValue": "急诊+病例本",
                }],

                // 遮罩层
                loading: true,
                // 选中部门Ids
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 科室下拉列表数据
                deptOptions: [],

                // 性别数据字典
                sexOptions: [{
                    "label": "男",
                    "value": 0
                }, {
                    "label": "女",
                    "value": 1
                }, {
                    "label": "未知",
                    "value": 2
                }],
                //***********挂号类型************
                guahaoleixing:{
                    registraName: undefined,
                    //挂号费
                    registraUnitprice: 0
                },
                // 挂号类型
                schedulingTypeOptions: [],
                // 排班时段
                subsectionTypeOptions: [],
                // 挂号项目
                regItemOptions: [],
                // 患者信息查询参数
                patientParams: {
                    patientSex:2,
                },
                /*// 有号部门的查询条件
                queryDeptParams: {
                    deptId: undefined,
                    schedulingType: '1',
                    subsectionType: undefined,
                    schedulingDay: new Date(),
                    regItemId: 1,
                    regItemAmount: undefined
                },*/
                // 挂号费用
                regItemAmount: undefined,
                /*// 表单校验
                rules: {
                    name: [
                        { required: true, message: '患者姓名不能为空', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
                    ],
                    idCard: [
                        { required: true, message: '身份证号不能为空', trigger: 'blur' }
                    ]
                },*/
            }
        },
        watch: {
            patientParams: {
                handler: function() {
                    if (this.patientParams.birthday !== undefined) {
                        this.patientParams.age = this.getAge(this.patientParams.birthday.substring(0, 10))
                    }
                },
                deep: true
            }
        },
        created() {

            //==============挂号类型的集合===============
            this.getList();
            // 加载排班类型 1 门诊  2急诊
            this.getDataByType('his_scheduling_type').then(res => {
                this.schedulingTypeOptions = res.data
            })
            // 排班时段 1 2 3 上午 下午 晚上
            this.getDataByType('his_subsection_type').then(res => {
                this.subsectionTypeOptions = res.data
            })
            // 加载用户性别
            this.getDataByType('sys_user_sex').then(res => {
                this.sexOptions = res.data
            });
            // 查询所有可用的挂号项目
            selectAllRegisteredItem().then(res => {
                this.regItemOptions = res.data
                this.queryDeptParams.regItemId = this.regItemOptions[0].regItemId
                this.queryDeptParams.regItemAmount = this.regItemOptions[0].regItemFee
            })
            // 设置查询时段
            const subsectionType = this.getCurrentTimeType()
            this.queryDeptParams.subsectionType = subsectionType
            // 加载部门数据
            this.getDeptForScheduling()
        },
        methods: {
            submitForm() {
              alert("挂号成功");
            },
            /** 查询岗位列表 */
            getRegisteredList() {
                this.loading = true;
                listRegister(this.queryParams).then(response => {
                    this.RegisterList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getRegisteredList();
            },
            // 根据点击 门诊、门诊+病例、急诊、急诊+病例  单机事件 获得当前按钮的值 再去获得对应的挂号费用
            handleRegistraNameQuery(name) {
                this.guahaoleixing.registraName = name;
                getRegistraFee(name).then(res =>{
                    this.guahaoleixing.registraUnitprice = res.data.registraUnitprice;
                })

            },
            //**********科室信息***************
            getList(){
                this.loading = true;
                listDept(this.queryParams).then(response => {
                    this.deptList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },

            // 根据输入的身份证号加载患者数据
            handleIdCardQuery() {
                this.loading = true
                getPatientInfo(this.patientParams.patientIdnum).then(res => {
                    this.patientParams = res.data
                    if (res.data.patientSex == "男"){
                        this.patientParams.patientSex = 0;
                    }else if(res.data.patientSex == "女"){
                        this.patientParams.patientSex = 1;
                    }else if(res.data.patientSex == "未知"){
                        this.patientParams.patientSex = 2;
                    }
                    console.log(res.data)
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                    this.patientParams = { patientSex: '2' }
                })
            },
            // 更新挂号项目类型事件
            registeredItemChange(id) {
                this.regItemOptions.filter(item => {
                    if (id === item.regItemId) {
                        this.queryDeptParams.regItemId = item.regItemId
                        this.queryDeptParams.regItemAmount = item.regItemFee
                    }
                })
                // 动态显示挂号信息
                if (id === 1 || id === 2) {
                    this.queryDeptParams.schedulingType = '1'
                } else {
                    this.queryDeptParams.schedulingType = '2'
                }
                // 重新查询有号的部门
                this.getDeptForScheduling()
            },
            getDeptForScheduling() {
                this.loading = true
                listDeptForScheduling(this.queryDeptParams).then(res => {
                    this.deptTableList = res.data
                    this.loading = false
                })
            },
            // 查询
            handleDeptQuery() {
                this.getDeptForScheduling()
            },
            // 重置
            resetDeptQuery() {
                this.resetForm('queryDeptForm')
                this.getDeptForScheduling()
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.postId)
                this.single = selection.length!=1
                this.multiple = !selection.length
            },
            // 挂号收费
            handleRegistration() {
                const tx = this
                tx.$refs['form'].validate(vaid => {
                    console.log(vaid)
                    if (vaid) {
                        tx.$confirm('是否确认给【' + this.patientParams.name + '】进行挂号?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            closeOnClickModal: false,
                            type: 'waring',
                            center: true
                        }).then(() => {
                            // 取出要挂号的部门
                            const deptId = tx.ids[0]
                            // 组装要提交到后台的挂号数据
                            const data = { 'patientDto': tx.patientParams, 'registrationDto': {
                                    deptId: deptId,
                                    regItemId: tx.queryDeptParams.regItemId,
                                    regItemAmount: tx.queryDeptParams.regItemAmount,
                                    visitDate: this.moment(tx.queryDeptParams.schedulingDay).format('YYYY-MM-DD'),
                                    schedulingType: tx.queryDeptParams.schedulingType,
                                    subsectionType: tx.queryDeptParams.subsectionType
                                }}
                            // 提交数据到后台
                            addRegistration(data).then(res => {
                                const regId = res.data
                                tx.msgSuccess('挂号成功 挂号单号为【' + regId + '】')
                                // 清空页面上的数据
                                tx.resetDeptQuery()
                                tx.patientParams = { sex: '2' }

                                tx.$confirm('是否确认给挂号ID为【' + regId + '】的挂号收费?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    closeOnClickModal: false,
                                    type: 'waring',
                                    center: true
                                }).then(() => {
                                    // 重新查询挂号列表
                                    collectFee(regId).then(r => {
                                        tx.msgSuccess('收费成功')
                                        tx.getDeptForScheduling()
                                    }).catch(() => {
                                        tx.msgError('收费失败')
                                    })
                                }).catch(() => {
                                    tx.msgError('收费取消')
                                })
                            }).catch(() => {
                                tx.msgError('挂号失败')
                            })
                        }).catch(() => {
                            tx.msgError('挂号已取消')
                        })
                    }
                })
            }
        }
    }
</script>
<style scoped>
  .box-card{
    padding: 0px;
    margin: 0px;
    margin-bottom: 8px;
  }
</style>
